<template>
  <div class="page">
    <ConfigProvider :locale="locale">
      <EDesigner ref="designerRef">
        <template #header-right-suffix>
          <div class="locale-select">
            语言
            <Select
              style="width: 75px"
              v-model:value="localeType"
              :options="[
                {
                  label: '中文',
                  value: 'zhCN',
                },
                {
                  label: '英文',
                  value: 'enUS',
                },
              ]"
            />
          </div>
          <!-- <button @click="handleGet">数据回显</button> -->
          <!-- <button @click="handleReset">重置操作</button> -->
        </template>
      </EDesigner>
    </ConfigProvider>
  </div>
</template>
<script setup lang="ts">
import { EDesigner } from "epic-designer";
import { computed, ref } from "vue";
import { ConfigProvider, Select } from "ant-design-vue";
import "dayjs/locale/zh-cn";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import enUS from "ant-design-vue/es/locale/en_US";
const locales = {
  zhCN,
  enUS,
};
const localeType = ref<"zhCN" | "enUS">("zhCN");
const locale = computed(() => {
  return locales[localeType.value];
});

const designerRef = ref<InstanceType<typeof EDesigner>>();
</script>
<style>
.page {
  height: 100vh;
}

.page button {
  margin-left: 8px;
}

.locale-select{
  margin-left: 16px;
}
</style>
